let marks = [
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "52db5844-d904-4a83-9b79-a3ea946986d5",
      name: "PCR仓库",
      position: [2.1019974287701384, 0.6527177483415378, 31.368951303527453],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "798fb508-2b87-4e9e-a5a6-82f01eacc8f3",
      name: "PCR五厂",
      position: [2.102025032065021, 0.652643807603771, 34.61],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "2127ae28-0edc-4a7d-aff0-58154c079c52",
      name: "PCR六厂",
      position: [2.1019697249062625, 0.6526532128391391, 30.76],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "85aef52c-33b5-4ee6-ad94-61ed190b1292",
      name: "员工中心",
      position: [2.1020750705468547, 0.6526003339561802, 72.2],
      pinBuilder: {},
      far: 1073741824
    }
  },
  
  
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "016a279f-f534-4f69-aca0-878720834172",
      name: "PCR二厂",
      position: [2.102038404842104, 0.6525968020749945, 25.66],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "57e9d4d0-7267-44e6-9755-ca2f6aae6405",
      name: "TBR四厂",
      position: [2.1019219655401216, 0.652608564203782, 28.49],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "49564fb7-ee13-4460-98ea-adf1f21ee985",
      name: "TBR仓库",
      position: [2.1018231778166356, 0.6526213259502828, 27.89],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "616196f9-1fe7-410c-907d-c526272e3f12",
      name: "密炼厂区",
      position: [2.101960905848174, 0.6525788989442391, 57.7],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "156267ae-ff96-4cd4-a753-dbe2b36cdd33",
      name: "TBR三厂",
      position: [2.101914580354979, 0.6525686572066363, 30.87],
      pinBuilder: {},
      far: 1073741824
    }
  },
  {
    czmObject: {
      xbsjType: "Pin",
      xbsjGuid: "88994653-72b0-4b6a-8142-44dcc0ac0132",
      name: "电厂",
      position: [2.1020221570774344, 0.6525493930884796, 120.47],
      pinBuilder: {},
      far: 1073741824
    }
  },
  
  
  
  
  
];

import uuidv1 from "uuid/v1";

import echarts from "echarts";

let mixin = {
  props: {},
  mounted() {},
  data() {
    return {};
  },
  watch: {},

  methods: {
    linglong() {
      this.loadcycle();
      this.loadtile();
      marks.map(item => {
        this.loadmark(item);
      });
    },

    loadcycle() {
      let earth = this._earth;
      const evalString = `
                Cesium.Resource.createIfNeeded('./configuration/3d/circle.png').fetchImage().then(function(image) {
                    console.log('image loaded!');
                    p._ctx_image = image;
                });
            `;

            const preUpdateEvalString = `
                if (typeof p.dAngle === 'undefined') p.dAngle = 360.0;
                p.dAngle -= 1.0;
                if (p.dAngle < 0.0) {
                    p.dAngle = 360.0;
                }
                const rotation = p.dAngle / 180.0 * Math.PI;

                p.drawCanvas(ctx => {
                    ctx.clearRect(0, 0, 512, 512);

                    ctx.beginPath();
                    ctx.strokeStyle = "rgb(128, 128, 128)";
                    // ctx.setLineDash([8, 8]);
                    ctx.lineWidth = 1;
                    ctx.arc(256, 256, 250, 0, Math.PI*2, true);
                    ctx.stroke();

                    if (p._ctx_image) {
                        ctx.save();
                        ctx.translate(256, 256);
                        ctx.rotate(rotation);
                        ctx.translate(-256, -256);
                        ctx.drawImage(p._ctx_image, 0, 0);
                        ctx.restore();
                    }
                });
            `;

            const config = {
                evalString,
                preUpdateEvalString,
                position: [2.101979748820076,
                  0.6526030750523542,, 41.369588015024185],
                width: 3000,
                height: 3000,
                canvasWidth: 512,
                canvasHeight: 512,
                color: [0.5, 0.8, 1, 0.3],
            };
            const p = new XE.Obj.CustomGroundRectangle(earth);
            p.xbsjFromJSON(config);

            return p;
    },

    loadtile() {
      this._earth.interaction.picking.enabled = true;
      this._earth.interaction.picking.hoverEnable = true;

      let fsb = `
          // 可以修改的参数
          // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
          float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
          float _heightRange = 40.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange) 默认是 0-60米
          float _glowRange = 150.0; // 光环的移动范围(高度)

          // 建筑基础色
          float vtxf_height = v_elevationPos.z - _baseHeight + 20.0;
          float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
          float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
          // gl_FragColor *= vec4(1.0, 1.0, 1.0, 1.0);
          gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0);

          // 动态光环
          float vtxf_a13 = fract(czm_frameNumber / 360.0);
          float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
          vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
          float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
          gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff);
      `;



      this._earth.sceneTree.root.children.push({
        ref: "lltel",
        czmObject: {
          xbsjType: "Tileset",
          xbsjGuid: "49a399a2-8da8-4781-bf85-9879cc71f661",
          name: "新建模型服务",
          url: "http://118.31.64.25:51920/model/llnnn/tileset.json",
          maximumScreenSpaceError: 0.0625,
          skipLevelOfDetail: false,
          luminanceAtZenith: 0.86,
          imageBasedLightingFactor: [0.17, 1],
          xbsjPosition: [
            2.101979748820076,
            0.6526030750523542,
            0.30288865587970043
          ],
          xbsjRotation: [0.2117907480048551, 0, 0],
          xbsjScale: [3, 3, 3],
          xbsjUseOriginTransform: false,
          // xbsjStyle: 'var style = {\n    color: "vec4(1,1,1,1)"\n}',
          xbsjClippingPlanes: {},
          xbsjCustomShader: {
            fsBody: fsb
          }
        }
      });

      this._earth.interaction.picking.clickedColor = [0, 1, 0.341, 1];
      this._earth.interaction.picking.hoveredColor = [0.137, 0.439, 0.866, 1];

      const tileset1 = this._earth.sceneTree.$refs.lltel.czmObject;

      // 拾取事件定制
      tileset1.onclick = pickedObject => {
        console.log(pickedObject);
        // pickedObject.getProperty('id');
        // pickedObject.getProperty('name');

        // this.dependlistArr.cardnengliu.filter(item => {
        //   return item.options.id == pickedObject.getProperty("name");
        // });

        // if (
        //   this.dependlistArr.cardnengliu.filter(item => {
        //     return item.options.id == pickedObject.getProperty("name");
        //   }).length != 0
        // ) {
        //   return;
        // }

        this.$message.success(pickedObject.getProperty("name"));

        // let positionarr = marks.filter(mark => {
        //   return mark.czmObject.name == pickedObject.getProperty("name");
        // });

        // if (positionarr.length == 0) {
        //   return
        // }

        // let options = {
        //   id: pickedObject.getProperty("name"),
        //   position: positionarr[0].czmObject.position
        // };

        // let uniqueID = uuidv1();
        // options.uid = uniqueID;
        // this.dependlistArr.cardnengliu.push({
        //   uid: uniqueID,
        //   diahtml: "",
        //   options: options
        // });

        // this.loadecharts(options);

        // return true; //是否禁用点选效果？
      };
    },

    tuyuandivchangqu(options) {
      function setdiv(p, options) {
        var htmlText = `
        <style>
        .box span {
            display: block;
            margin-top: 10px;
        }

        .defultbtn {
            display: inline-block;
            text-align: center;
            min-width: 60px;
            height: 38px;
            padding: 0 10px;
            line-height: 38px;
            border-radius: 15px;
            border: 1px solid #C9C9C9;
            background-color: #FFF;
            color: #555;
            cursor: pointer;
        }

        .defultbtn:hover {
            background-color: #b3daf8;
        }

        .btnon {
            background-color: #1E9FFF;
            color: #fff;
            border: 1px solid #1E9FFF;
        }
    </style>
    <div class="box" style="width: 256px; height: 512px; color: white; background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 5px; min-width:200px; font-size:24px; font-family: 宋体;">
        <div class="defultbtn" >平移</div>
        <div class="defultbtn" style="margin-left:20px;">旋转</div><br/>
        <span>经度：136.39°</span> 
        <span>纬度：39.9°</span> 
        <span>高度：120m</span> 
        <span>偏航角：120°</span> 
        <span>俯仰角：90°</span> 
        <span>翻滚角：0°</span> 
    </div>
        `;
        var htmlText = `
            <style>
            .cardnengliudiv {
              background-image: url("/configuration/cesium/linglong/changqu.png");
              background-size: 100% 100%;
              width: 1940px;
              height: 2280px;
              background-color: #5559;
              font-size: 150px;
            }
            </style>
            <div
              class="cardnengliudiv"
            >
                <div style="position: absolute;left: 400px;top: 150px;">${options.id}</div>
                <div style="position: absolute;left: 300px;top: 700px;">
                  <span style="color: #50C9FF; padding: 0px 50px;">用电量</span>
                  <span>1366 kWh</span>
                </div>
                <div style="position: absolute;left: 300px;top: 1110px;">
                  <span style="color: #50C9FF; padding: 0px 50px;">用气量</span>
                  <span>1366 t/h</span>
                </div>
                <div style="position: absolute;left: 300px;top: 1600px;">
                  <span style="color: #50C9FF; padding: 0px 50px;">用水量</span>
                  <span>1366 t/h</span>
                </div>
                <div style="position: absolute;left: 300px;top: 2000px;">
                  <span style="color: #50C9FF; padding: 0px 50px;">产量</span>
                  <span>1366 个</span>
                </div>
            </div>
        `;

        // 方式1，但是性能消耗较大
        // const canvas = await XE.HTML.div2Canvas(htmlText);
        // p.imageUrl = canvas.toDataURL();

        // 方式2，性能提升
        p.imageUrl = "";
        XE.HTML.div2Canvas(htmlText, { width: 1940, height: 2280 }).then(
          res => {
            p.drawCanvas(ctx => {
              ctx.clearRect(0, 0, 1940, 2280);
              ctx.drawImage(res, 0, 0);
            });
          }
        );
      }

      let bill = {
        ref: "billboard",
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: options.uid,
          evalString: "",
          position: [2.174033927183021, 0.10999357244211576, 0],
          rotation: [1.8, 0, 0],
          scale: [50, 50, 50],
          positions: [
            0,
            -1,
            0,
            0,
            1,
            0,
            0,
            1,
            2,
            0,
            -1,
            2,
            0,
            1,
            0,
            0,
            -1,
            0,
            0,
            -1,
            2,
            0,
            1,
            2
          ],
          sts: [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1],
          indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7],
          renderState: {
            cull: {
              enabled: true
            },
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [1, 1, 1, 1],
          canvasWidth: 1940,
          canvasHeight: 2280,
          autoRegisterEditing: true
        }
      };

      options.position[2] = options.position[2] + 80;

      bill.czmObject.position = options.position;
      bill.ref = options.uid;
      this._earth.sceneTree.root.children.push(bill);

      let p = this._earth.sceneTree.$refs[options.uid].czmObject;

      setdiv(p, options);
    },

    loadecharts(options) {
      let _this = this;
      function setEcharts(p) {
        var container = document.createElement("div");
        container.style.width = "1024px";
        container.style.height = "512px";

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(container);

        var scale = _this.$root.setting.scale;

        var option = {
          tooltip: null,
          series: {
            type: "sankey",
            // layout: 'none',
            focusNodeAdjacency: "allEdges",
            label: {
              normal: {
                fontSize: 24 * scale,
                color: "#A0C8DB"
              }
            },
            lineStyle: {
              borderColor: "#ddd",
              borderWidth: 1,
              color: "source"
            },
            data: [
              {
                name: "燃烧",
                itemStyle: {
                  color: "#39CDA1",
                  borderColor: "#39CDA1"
                },
                textStyle: {
                  color: "#ffffff"
                },
                value: 15
              },
              {
                name: "购电",
                itemStyle: {
                  color: "#18A2E2",
                  borderColor: "#18A2E2"
                }
              },
              {
                itemStyle: {
                  color: "#39CDA1",
                  borderColor: "#39CDA1"
                },
                name: "CHP"
              },
              {
                itemStyle: {
                  color: "#ECAE33",
                  borderColor: "#ECAE33"
                },
                name: "电力总线"
              },
              {
                itemStyle: {
                  color: "#E4E26A",
                  borderColor: "#E4E26A"
                },
                name: "蒸汽总线"
              },
              {
                itemStyle: {
                  color: "#4FC7FF",
                  borderColor: "#4FC7FF"
                },
                name: "密炼"
              },
              {
                itemStyle: {
                  color: "#4FC7FF",
                  borderColor: "#4FC7FF"
                },
                name: "其他"
              },
              {
                itemStyle: {
                  color: "#18A2E2",
                  borderColor: "#18A2E2"
                },
                name: "三厂"
              },
              {
                itemStyle: {
                  color: "#137FD3",
                  borderColor: "#137FD3"
                },
                name: "废弃"
              },
              {
                itemStyle: {
                  color: "#1484DC",
                  borderColor: "#1484DC"
                },
                name: "四厂"
              },
              {
                itemStyle: {
                  color: "#18A2E2",
                  borderColor: "#18A2E2"
                },
                name: "六厂"
              },
              {
                itemStyle: {
                  color: "#137FD3",
                  borderColor: "#137FD3"
                },
                name: "五厂"
              },
              {
                itemStyle: {
                  color: "#137FD3",
                  borderColor: "#137FD3"
                },
                name: "二厂"
              }
            ],
            links: [
              {
                source: "燃烧",
                target: "CHP",
                value: 20
              },
              {
                source: "购电",
                target: "CHP",
                value: 3
              },
              {
                source: "CHP",
                target: "电力总线",
                value: 18
              },
              {
                source: "CHP",
                target: "蒸汽总线",
                value: 8
              },
              {
                source: "电力总线",
                target: "密炼",
                value: 4
              },
              {
                source: "电力总线",
                target: "其他",
                value: 2
              },
              {
                source: "电力总线",
                target: "三厂",
                value: 2
              },
              {
                source: "电力总线",
                target: "废弃",
                value: 2
              },
              {
                source: "电力总线",
                target: "四厂",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "其他",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "三厂",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "废弃",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "四厂",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "六厂",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "五厂",
                value: 2
              },
              {
                source: "蒸汽总线",
                target: "二厂",
                value: 2
              }
            ]
          }
        };

        myChart.setOption(option);

        myChart.on("rendered", function() {
          // 方式1，使用简单
          // p.imageUrl = myChart.getDataURL();

          // 方式2，渲染性能高
          const canvas = myChart.getRenderedCanvas();
          p.drawCanvas(ctx => {
            ctx.drawImage(canvas, 0, 0);
          });
        });
      }

      let bill = {
        ref: "billboard",
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: options.uid,
          evalString:
            "Cesium.Resource.createIfNeeded('./assets/city/billboard.png').fetchImage().then(function(image) { p.drawCanvas(ctx => {ctx.clearRect(0, 0, 512, 256); ctx.drawImage(image, 0, 0);}); });",
          position: [2.174033927183021, 0.10999357244211576, 0],
          rotation: [1.8, 0, 0],
          scale: [1, 100, 50],
          positions: [
            0,
            -1,
            0,
            0,
            1,
            0,
            0,
            1,
            2,
            0,
            -1,
            2,
            0,
            1,
            0,
            0,
            -1,
            0,
            0,
            -1,
            2,
            0,
            1,
            2
          ],
          sts: [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1],
          indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7],
          renderState: {
            cull: {
              enabled: true
            },
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [1, 1, 1, 1],
          canvasWidth: 1024,
          canvasHeight: 512,
          autoRegisterEditing: true
        }
      };

      options.position[2] = options.position[2] + 18;

      bill.czmObject.position = options.position;
      bill.ref = options.uid;
      this._earth.sceneTree.root.children.push(bill);

      let p = this._earth.sceneTree.$refs[options.uid].czmObject;

      setEcharts(p);
    },

    loadmark(item) {
      let ppp = _.cloneDeep(item.czmObject.position);
      // ppp[0] = (((ppp[0] * 180.0) / Math.PI - 0.001) * Math.PI) / 180.0;
      let ddd = {
        czmObject: {
          xbsjType: "CustomPrimitive",
          xbsjGuid: uuidv1(),
          evalString: `
          Cesium.Resource.createIfNeeded('/configuration/cesium/lllabel.png').fetchImage().then(function(image) {
            p.drawCanvas(ctx => {
              ctx.clearRect(0, 0, 329, 165);
              ctx.font='50px Arial';
              ctx.drawImage(image, 0, 0);
              ctx.fillStyle='#eeeeeeee';
              ctx.font='50px Arial';
              ctx.fillText("${item.czmObject.name}", 100, 70);
              ctx.fillText("${_.random(0, 10000)}", 100, 130);
            });
          });`,

          // evalString:
          //   "\n                Cesium.Resource.createIfNeeded('/configuration/cesium/lllabel.png').fetchImage().then(function(image) {\n                    console.log('image loaded!');\n                    p.drawCanvas(ctx => {\n                        ctx.clearRect(0, 0, 329, 165);ctx.font='50px Arial';\n                        ctx.drawImage(image, 0, 0);ctx.fillStyle='#eeeeeeee';ctx.font='50px Arial';ctx.fillText('" +
          //   item.czmObject.name +
          //   "', 100, 70);ctx.fillText('" +
          //   _.random(0, 10000) +
          //   "', 100, 130);\n                    });\n                });\n            ",
          position: ppp,
          // position: item.czmObject.position,
          // rotation: [],
          rotation: [1.8, 0, 0],
          scale: [10, 80, 40],
          positions: [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2],
          sts: [0, 0, 1, 0, 1, 1, 0, 1],
          indices: [0, 1, 2, 0, 2, 3],
          renderState: {
            cull: {
              enabled: false
            },
            polygonOffset: {},
            scissorTest: {
              rectangle: {}
            },
            depthRange: {},
            depthTest: {
              enabled: true
            },
            colorMask: {},
            depthMask: false,
            blending: {
              enabled: true,
              color: {},
              equationRgb: 32774,
              equationAlpha: 32774,
              functionSourceRgb: 770,
              functionDestinationRgb: 771,
              functionDestinationAlpha: 771
            },
            stencilTest: {
              frontOperation: {},
              backOperation: {}
            },
            sampleCoverage: {}
          },
          color: [0.5, 0.8, 1, 2],
          canvasWidth: 329,
          canvasHeight: 165,
          autoRegisterEditing: true
        }
      };

      this._earth.sceneTree.root.children.push(ddd);

      let options = {
        id: item.czmObject.name,
        position: item.czmObject.position
      };

      let uniqueID = uuidv1();
      options.uid = uniqueID;
      // this.dependlistArr.cardchangqu.push({
      //   uid: uniqueID,
      //   diahtml: "",
      //   options: options
      // });

      this.tuyuandivchangqu(options);
    }
  }
};

export default mixin;
